<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { reqChangeDrawRestrictives, reqGetCount, reqGetDrawRestrictives, reqGetOrder } from '@/api/index.js'
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user.js";

const echart = ref()
const order = ref([])
const count = ref({})
const levelId = ref(1);
const levelList = [
  { text: '普通以上', value: 1 },
  { text: '稀有以上', value: 2 },
  { text: '史诗以上', value: 3 },
];
const status = ref(false)

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(echart.value)

  getOrder(myChart)

  getCount()

  getDrawRestrictives()
})

const getDrawRestrictives = async () => {
  const result = await reqGetDrawRestrictives()
  if (result.code === 200) {
    levelId.value = result.data.type
    status.value = result.data.status !== 0
  }
}

const changeDrawRestrictives = async (value) => {
  const result = await reqChangeDrawRestrictives({
    type: levelId.value,
    status: value ? 1 : 0
  })
  if (result.code === 200) {
    status.value = value
  }
}

const getCount = async () => {
  const result = await reqGetCount()
  if (result.code === 200) {
    count.value = result.data
  }
}

const getOrder = async (myChart) => {
  const result = await reqGetOrder()

  if (result.code === 200) {
    result.data.forEach(val => {
      val.count = val.inline_num + '/' + val.upline_num
    });

    order.value = result.data
    console.log(order.value)
    myChart.setOption({
      legend: {
        data: [
          {
            name: "总充金额",
            color: '#F56C6C'
          },
          {
            name: "线上金额",
            color: '#67C23A'
          },
          {
            name: "线下金额",
            color: '#E6A23C'
          },
        ]
      },
      tooltip: {
        textStyle: {
          color: '#000'
        },
        padding: [10, 10],
        trigger: 'axis',
        backgroundColor: '#fff',
        borderColor: 'rgba(255, 186, 108,0.8)',
        borderWidth: 1
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        show: false
      },

      xAxis: {
        type: 'category',
        data: order.value.map((item) => item.date),
        axisLine: {
          lineStyle: {
            color: 'rgba(193, 207, 220, 1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(0, 0, 0, 1)'
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'rgba(0, 0, 0, 1)'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#cdd5e2'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(193, 207, 220, 1)'
            }
          }
        }
      ],
      series: [
        {
          name: '总充金额',
          type: 'line',
          data: order.value.map((item) => item.num),
          symbolSize: 10,
          symbol: 'circle',
          smooth: false,
          yAxisIndex: 0,
          label: {
            show: true,
            textStyle: {
              color: '#F56C6C',
              fontSize: 12,
              fontFamily: 'DIN',
              fontWeight: 'bold'
            },
            position: 'top',
            formatter: function (p) {
              return p.value > 0 ? p.value : ''
            }
          },
          lineStyle: {
            width: 2,
            color: '#F56C6C',
            shadowColor: '#F56C6C',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          itemStyle: {
            normal: {
              color: '#F56C6C',
              borderColor: '#fff',
              borderWidth: 3,
              shadowColor: '#F56C6C',
              shadowBlur: 5
            }
          },
          // areaStyle: {
          //   //区域填充样式
          //   normal: {
          //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          //     color: new echarts.graphic.LinearGradient(
          //       0,
          //       0,
          //       0,
          //       1,
          //       [
          //         {
          //           offset: 0,
          //           color: 'rgba(255, 176, 69, 0.7)'
          //         },
          //         {
          //           offset: 0.5,
          //           color: 'rgba(255, 176, 69, 0.2)'
          //         },
          //         {
          //           offset: 1,
          //           color: 'rgba(165, 170, 247, 0)'
          //         }
          //       ],
          //       false
          //     ),
          //     shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          //   }
          // }
        },
        {
          name: '线上金额',
          type: 'line',
          data: order.value.map((item) => item.inline_num),
          symbolSize: 10,
          symbol: 'circle',
          smooth: false,
          yAxisIndex: 0,
          label: {
            show: true,
            textStyle: {
              color: '#67C23A',
              fontSize: 12,
              fontFamily: 'DIN',
              fontWeight: 'bold'
            },
            position: 'top',
            formatter: function (p) {
              return p.value > 0 ? p.value : ''
            }
          },
          lineStyle: {
            width: 2,
            color: '#67C23A',
            shadowColor: '#67C23A',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          itemStyle: {
            normal: {
              color: '#67C23A',
              borderColor: '#fff',
              borderWidth: 3,
              shadowColor: '#67C23A',
              shadowBlur: 5
            }
          },
          // areaStyle: {
          //   //区域填充样式
          //   normal: {
          //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          //     color: new echarts.graphic.LinearGradient(
          //       0,
          //       0,
          //       0,
          //       1,
          //       [
          //         {
          //           offset: 0,
          //           color: 'rgba(255, 176, 69, 0.7)'
          //         },
          //         {
          //           offset: 0.5,
          //           color: 'rgba(255, 176, 69, 0.2)'
          //         },
          //         {
          //           offset: 1,
          //           color: 'rgba(165, 170, 247, 0)'
          //         }
          //       ],
          //       false
          //     ),
          //     shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          //   }
          // }
        },
        {
          name: '线下金额',
          type: 'line',
          data: order.value.map((item) => item.upline_num),
          symbolSize: 10,
          symbol: 'circle',
          smooth: false,
          yAxisIndex: 0,
          label: {
            show: true,
            textStyle: {
              color: '#E6A23C',
              fontSize: 12,
              fontFamily: 'DIN',
              fontWeight: 'bold'
            },
            position: 'top',
            formatter: function (p) {
              return p.value > 0 ? p.value : ''
            }
          },
          lineStyle: {
            width: 2,
            color: '#E6A23C',
            shadowColor: '#E6A23C',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          itemStyle: {
            normal: {
              color: '#E6A23C',
              borderColor: '#fff',
              borderWidth: 3,
              shadowColor: '#E6A23C',
              shadowBlur: 5
            }
          },
          // areaStyle: {
          //   //区域填充样式
          //   normal: {
          //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          //     color: new echarts.graphic.LinearGradient(
          //       0,
          //       0,
          //       0,
          //       1,
          //       [
          //         {
          //           offset: 0,
          //           color: 'rgba(255, 176, 69, 0.7)'
          //         },
          //         {
          //           offset: 0.5,
          //           color: 'rgba(255, 176, 69, 0.2)'
          //         },
          //         {
          //           offset: 1,
          //           color: 'rgba(165, 170, 247, 0)'
          //         }
          //       ],
          //       false
          //     ),
          //     shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          //   }
          // }
        },
      ]
    })
  }
}

const router = useRouter()

const gotoRecharge = () => {
  router.push('/recharge')
}
const gotoOrders = () => {
  console.log("订单")
  router.push('/goodorder')
}
const gotoadverOrders = () => {
  console.log("订单")
  router.push('/adverOrder')
}

const userStore = useUserStore()

const logout = () => {
  userStore.logout()
}
</script>

<template>
  <div class="home-container">
    <van-grid column-num="2">
      <van-grid-item icon="balance-o" @click="gotoRecharge">
        <template #text>
          <p style="font-weight: bold">今日充值 / 总充值</p>
          <p style="font-size: 13px;">{{ count.today_income || 0 }} / {{ count.total_income || 0 }}</p>
        </template>
      </van-grid-item>
      <van-grid-item icon="balance-o" @click="gotoRecharge">
        <template #text>
          <p style="font-weight: bold">线上充值 / 线下充值</p>
          <p style="font-size: 13px;">{{ count.online_income || 0 }} / {{ count.generation_income || 0 }}</p>
        </template>
      </van-grid-item>
      <van-grid-item icon="records-o">
        <template #text>
          <p style="font-weight: bold">今日流水 / 总流水</p>
          <p style="font-size: 13px;">{{ count.today_pay || 0 }} / {{ count.total_pay || 0 }}</p>
        </template>
      </van-grid-item>
      <van-grid-item icon="logistics">
        <template #text>
          <p style="font-weight: bold" @click="gotoOrders">待发货 / 待提现</p>
          <p style="font-size: 13px;">{{ count.order_count || 0 }} / {{ count.cash_count || 0 }}</p>
        </template>
      </van-grid-item>
      <van-grid-item icon="orders-o">
        <template #text>
          <p style="font-weight: bold" @click="gotoadverOrders">进阶发货 / 待发货</p>
          <p style="font-size: 13px;">{{ count.order_count || 0 }} / {{ count.cash_count || 0 }}</p>
        </template>
      </van-grid-item>
      <van-grid-item icon="orders-o">
        <template #text>
          <p style="font-weight: bold">今日提货 / 已提货</p>
          <p style="font-size: 13px;">{{ count.today_th_income || 0 }} / {{ count.total_th_income || 0 }}</p>
        </template>
      </van-grid-item>
    </van-grid>
    <van-cell-group>
      <van-cell icon="" title="幸运屋" is-link to="luckyhouse" size="large" />
      <van-cell icon="after-sale" title="盈亏数据" is-link to="profit" size="large" />
      <van-cell icon="send-gift-o" title="开盒记录" is-link to="draw" size="large" />
      <van-cell icon="send-gift-o" title="赠礼记录" is-link to="give" size="large" />
      <van-cell icon="manager-o" title="推广员申请" is-link to="promotion" size="large" />
      <!--<van-cell center title="连出限制" size="large" icon="discount-o">
        <template #value>
          <van-dropdown-menu style="--van-dropdown-menu-height: 30px;">
            <van-dropdown-item @change="changeDrawRestrictives(status)" v-model="levelId" :options="levelList" />
          </van-dropdown-menu>
        </template>
        <template #right-icon>
          <van-switch v-model="status" inactive-color="#ee0a24" @change="changeDrawRestrictives"></van-switch>
        </template>
      </van-cell>-->
    </van-cell-group>
    <van-cell icon="" title="擂台袋赏" size="large" to="bag" is-link />
    <van-cell icon="" title="用户宝箱/福袋" size="large" to="chest" is-link />
    <!-- <van-cell icon="" title="天命人" size="large" to="tmr" is-link /> -->
    <!-- <van-cell icon="" title="擂台黑名单" size="large" to="challboxblack" is-link /> -->
    <van-cell icon="" title="擂台赠礼记录" size="large" to="give2" is-link />
    <van-cell icon="" title="充值/扣除操作日志" size="large" to="operationlog" is-link />

    <div class="recharge-table" ref="echart"></div>

    <van-button type="danger" block @click="logout" style="margin-bottom: 20px;">退出登录</van-button>
    <!--<van-switch style="margin: auto;" v-model="status" inactive-color="#ee0a24"
      @change="changeDrawRestrictives"></van-switch>-->

    <van-cell icon="" title="擂白" size="large" to="white" is-link />
    <van-cell icon="" title="擂黑" size="large" to="challboxblack" is-link />
    <van-cell icon="" title="无限黑" size="large" to="wxsBlack" is-link />
  </div>
</template>

<style scoped>
.recharge-table {
  width: 95%;
  margin: 10px auto;
  height: 400px;
}
</style>
